<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // promise 是什么 为什么 怎么做
    // promise是一个封装异步操作的容器?
    // 解决回调地狱
    // 怎么做?
    // 1.创建promise实例(pending, fulfuiled, rejected)
    // const p = new Promise((resolve, reject) => {
    //   // 异步操作, 耗时很长,
    //   // resolve() 成功的时候需要调用这个函数, 将promise的状态从pending改fulfilled成功
    //   // reject() 失败的时候需要调用, pending => rejected, 一旦状态修改, 状态凝固
    // })
    // // 2.如何使用
    // p.then(() => {
    //   // 这个函数会在promise变成fulfilled以后, 会调用
    // }).catch(() => {
    //   // 这个会在rejected失败后会调用
    // })

    // ----------------------------------------------------------------------------

    // 需求1: 希望在2秒以后, 控制台打印一个zs
    // 需求2: 希望2秒后要做的操作不写死, 比如2秒以后打印zs , 2秒后 alert ls
    // 需求3: 希望2秒后,打印zs, 打印完zs以后, 再过两秒,打印ls
    // callback是个函数
    // function fn(callback) {
    //   setTimeout(() => {
    //     // console.log('zs')
    //     callback()
    //   }, 2000)
    // }

    // 调用fn函数时, 需要传入一个函数 => 回调函数(一个函数被当成参数传递)
    // fn(() => {
    //   console.log('zs')
    // })

    // fn(function() {
    //   console.log('ls')
    // })

    // fn(function() {
    //   console.log('zs')

    //   // 这个定时器是打印完zs以后开启的
    //   fn(function() {
    //     console.log('ls')

    //     // 开定时器, 打印ww
    //     fn(function() {
    //       console.log('ww')
    //     })
    //   })
    // })

    // 回调地狱: 将来我们如果希望在一个异步操作结束以后,做某件事,  只能通过回调函数去实现
    // ===> 逻辑复杂, 你需要传入特多的回调函数, 代码横着走 => 嵌套地狱

    // ----------------------------------------------------------------------------

    // 实现promise的版本 => 解决回调地狱(嵌套地狱)

    // 这个将来会返回 两秒以后成功的promise
    function fn() {
      return new Promise((resolve, reject) => {
        // promise是个异步操作的容器 => 不就是放异步代码的么
        setTimeout(() => {
          resolve()
        }, 2000)
      })
      // return undefined
    }

    // fn().then(() => {
    //   // 成功函数
    //   console.log('zs')
    //   return fn()
    // }).then(() => {
    //   console.log('ls')
    //   return fn()
    // }).then(() => {
    //   console.log('ww')
    // })

    // async await 再优化  => 将来你可以 以同步代码的方式 去书写 异步代码
    async function test() {
      await fn()
      console.log('zs')

      await fn()
      console.log('ls')

      await fn()
      console.log('ww')
    }

    test()

    // 总结:
    // 将来如果希望等一个异步操作结束以后做某件事,
    // 1. 回调函数 =>  将来把你希望在异步操作结束以后要做的事, 封装成一个函数 传递进去
    // 2. promise的版本 => 异步操作丢到promise里, 成功以后resolve() ,  失败 reject()
    //   => p.then(() => {}).catch(() => {}) 或者 async  await


    // axios => 基于promise的请求库
    // new Promise((res, rej) => { new XMLHttpRequest().....  })
    // axios(...).then(res => {....})  或者 async  await
  </script>
</body>
</html>
